<script setup>
import {useAPIStore} from "@/stores/APIStore.js";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";

const apiStore = useAPIStore()

// 新增dialog
const addDialog = ref(false)

// 详情dialog
const detailDialog = ref(false)

// 编辑dialog
const editDialog = ref(false)

const formLabelWidth = '140px'

// 定义模型
const options = [
  {
    id: 0,
    value: "GPT-4o",
    label: "GPT 40版本"
  }, {
    id: 1,
    value: "gpt-4-turbo",
    label: "GPT 4 turbo 版本"
  }, {
    id: 2,
    value: "gpt-3.5-turbo",
    label: "GPT 3.5 版本"
  }
]


// 添加api对象
const addAPI = ref({
  api_configuration_name: null,
  api_configuration: {
    llm: null,
    max_tokens: null,
    temperature: 0,
    knowledge: null,
    trained_prompt_id: null,
    no_trained_prompt_id: null
  }
})

// 详情api对象
const detailAPI = ref({})

const confirmAddAPI = async () => {
  const data = await apiStore.addAPI(addAPI.value)
  if (typeof data.data === 'number' && !isNaN(data.data)) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }

  await apiStore.listAPI()
  addDialog.value = false
}

const handleDetail = async (index) => {
  const data = {api_id: null}
  data.api_id = apiStore.apiList[index].api_id
  detailAPI.value = await apiStore.detailAPI(data)
  detailDialog.value = true
}

const handleEdit = async (index) => {
  const data = {api_id: null}
  data.api_id = apiStore.apiList[index].api_id
  detailAPI.value = await apiStore.detailAPI(data)
  editDialog.value = true
}

const handleDelete = async (index) => {
  const data_ = {api_id: null}
  data_.api_id = apiStore.apiList[index].api_id
  const data = await apiStore.delAPI(data_)
  if (data.data === 1) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }

  await apiStore.listAPI()
}

const confirmModifyAPI = async () => {
  const data = await apiStore.modifyAPI(detailAPI.value)
  if (data.data === 1) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }
  await apiStore.listAPI()
  editDialog.value = false
}


onMounted(() => apiStore.listAPI())
</script>

<template>
  <div id="add">
    <el-button type="primary" id="button-add" @click="addDialog = true">新建</el-button>
  </div>

  <el-table :data="apiStore.apiList" style="width: 100%">
    <el-table-column label="创建时间" width="180" fixed>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.create_at }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="api配置名称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.api_configuration_name }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="最近更新时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.update_at }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column fixed="right">
      <template #default="scope">
        <el-button
            size="small"
            type="success"
            @click="handleDetail(scope.$index, scope.row)"
        >
          详情
        </el-button>

        <el-button
            size="small"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
        >
          编辑
        </el-button>

        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新建dialog -->
  <el-dialog v-model="addDialog" title="新增api" width="500" :close-on-click-modal=false>
    <el-form :model="addAPI">
      <el-form-item label="api名称" :label-width="formLabelWidth">
        <el-input v-model="addAPI.api_configuration_name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="模型" :label-width="formLabelWidth">
        <el-select
            v-model="addAPI.api_configuration.llm"
            placeholder="Select the size of llm"
            style="width: 240px"
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="最大回复字数" :label-width="formLabelWidth">
        <el-input v-model.number="addAPI.api_configuration.max_tokens" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="温度" :label-width="formLabelWidth">
        <el-slider v-model.number="addAPI.api_configuration.temperature" :min="0" :max="2" :step="0.1"/>
      </el-form-item>

      <el-form-item label="知识库" :label-width="formLabelWidth">
        <el-input v-model.number="addAPI.api_configuration.knowledge" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="train prompt" :label-width="formLabelWidth">
        <el-input v-model.number="addAPI.api_configuration.trained_prompt_id" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="no train prompt" :label-width="formLabelWidth">
        <el-input v-model.number="addAPI.api_configuration.no_trained_prompt_id" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">Cancel</el-button>
        <el-button type="primary" @click="confirmAddAPI">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 详情dialog -->
  <el-dialog v-model="detailDialog" title="详情api" width="500" :close-on-click-modal=false>
    <el-form :model="detailAPI">
      <el-form-item label="api名称" :label-width="formLabelWidth">
        <el-input v-model="detailAPI.api_configuration_name" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="api模型" :label-width="formLabelWidth">
        <el-input v-model="detailAPI.api_configuration.llm" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="最大回复字数" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.api_configuration.max_tokens" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="温度" :label-width="formLabelWidth">
        <el-slider v-model.number="detailAPI.api_configuration.temperature" :min="0" :max="2" :step="0.1" disabled/>
      </el-form-item>

      <el-form-item label="知识库" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.api_configuration.knowledge" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="train prompt" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.api_configuration.trained_prompt_id" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="no train prompt" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.api_configuration.no_trained_prompt_id" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.create_at" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="更新时间" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.update_at" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="api后缀" :label-width="formLabelWidth">
        <el-input :value="detailAPI.api_suffix" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="detailDialog = false">Cancel</el-button>
        <el-button type="primary" @click="detailDialog = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑dialog -->
  <el-dialog v-model="editDialog" title="编辑api" width="500" :close-on-click-modal=false>
    <el-form :model="detailAPI">
      <el-form-item label="api名称" :label-width="formLabelWidth">
        <el-input v-model="detailAPI.api_configuration_name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="api模型" :label-width="formLabelWidth">
        <el-input v-model="detailAPI.api_configuration.llm" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="最大回复字数" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.api_configuration.max_tokens" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="温度" :label-width="formLabelWidth">
        <el-slider v-model.number="detailAPI.api_configuration.temperature" :min="0" :max="2" :step="0.1"/>
      </el-form-item>

      <el-form-item label="知识库" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.api_configuration.knowledge" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="train prompt" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.api_configuration.trained_prompt_id" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="no train prompt" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.api_configuration.no_trained_prompt_id" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.create_at" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="更新时间" :label-width="formLabelWidth">
        <el-input v-model.number="detailAPI.update_at" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="api后缀" :label-width="formLabelWidth">
        <el-input :value="detailAPI.api_suffix" autocomplete="off" disabled/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialog = false">Cancel</el-button>
        <el-button type="primary" @click="confirmModifyAPI">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
#button-add {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px;
}

</style>